<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>券</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">

</head>
<body>
<div class="page-group" >
    <div id="page-index" class="page page-current" >
        <style>
            .colorful{
                background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
            }
            #header header:after{
                display: none;
            }
            .goods-title{
                font-weight: bold;
            }
            .goods-store{
                font-size: .65rem;
            }
            .price{
                color: #ff2d2e;
                font-weight: bold;
                font-size: 0.9rem;
            }
            .list-block .item-text{
                height: unset;
            }
            .coupon{
                font-family: 黑体;
                color: white;
                background-color: red;
            }
            .volume{
                float: right;
            }
            #convert{
                width: 3rem;
                height: 3rem;
                background: #ec5353;
                position: fixed;
                bottom: 2rem;
                right: 1rem;
                border-radius: 1.5rem;
                z-index: 100;
            }
            #convert span{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        </style>
        <div id="header" class="colorful" style="height: 4.4rem">
            <header class="bar bar-nav" style="background-color: unset;padding-bottom: unset">
                <a class="icon icon-menu pull-left open-panel" style="color: white"></a>
                <h1 style="color: white;line-height: 2.4rem " class='title'>领券购物</h1>
            </header>
            <div class="bar bar-header-secondary colorful">
               <!-- <div class="searchbar row" style="background-color: unset">
                    <div class="search-input col-85">
                        <input type="search" id='search' placeholder='输入商品标题...'/>
                    </div>
                    <a class="button button-fill button-primary col-15" style="top: .125rem;background: unset" onclick="searchData()">搜索</a>
                </div>-->
                <div class="searchbar"  style="background-color: unset">
                    <a class="searchbar-cancel" id="searchBtn" style="color: white;font-size: 0.75rem;">搜索</a>
                    <div class="search-input">
                        <label class="icon icon-search" for="search"></label>
                        <input type="search" id='search' placeholder='输入关键字...'/>
                    </div>
                </div>
            </div>
        </div>
        <div id="sort" class="buttons-tab" style="display: none;z-index: 100;height: 2rem;">
            <div class="tab-link active button" sortname="" sortmethod="">综合</div>
            <div class="tab-link button" sortname="total_sales_" sortmethod="des"> <span class="icon icon-down"></span> 销量</div>
            <div class="tab-link button" sortname="price_" sortmethod="asc"> <span name = "icon" class="icon icon-up"></span> 价格</div>
            <div name="checkbox" class="tab-link button">
                <span>券</span>
                <label class="label-switch">
                    <input type="checkbox" checked="true">
                    <div class="checkbox" style="background: #fe968b;"></div>
                </label>
            </div>
        </div>
        <div id="contentList" class="content infinite-scroll infinite-scroll-bottom" data-distance="100" style="top: 6.4rem;">
            <div class="list-block media-list" style="margin: 0;">

                <ul class="list-container">
                    <!--<li>
                        <a href="#" class="item-link item-content">
                            <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 4rem;'></div>
                            <div class="item-inner">
                                <div class="item-title-row">
                                    <div class="item-title">标题</div>
                                    <div class="item-after">$15</div>
                                </div>
                                <div class="item-subtitle">标题</div>
                                <div class="item-text">此处是文本内容...</div>
                            </div>
                        </a>
                    </li>-->
                </ul>
            </div>
            <!-- 加载提示符 -->
            <div class="infinite-scroll-preloader" hidden>
                <div class="preloader"></div>
            </div>
            <!-- 加载结束 -->
            <div class="content-block" id="over" hidden>
                <p class="loadOver"></p>
            </div>
        </div>

        <div id="convert"><a href="convert.html" class="item-link item-content"><span class="icon icon-gift" style="font-size: 1.5rem;color: white"></span></a></div>

        <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
        <script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
        <script src="js/common.js"></script>

        <script>
            // 加载flag
            var loading = false;
            // 是否加载结束
            var isFinish = false;
            // 最多可加载的条目
            var total = 20;
            // 每次加载添加多少条目
            var pageSize = 20;
            // 页码
            var pageNumber = 1;
            // 上次加载的序号
            var lastIndex = 0;
            // 关键词
            var key;
            //是否仅筛选有券
            var hasCoupon = true;
            //排序方式
            var sort;

            //排序栏操作
            function sortParam() {
                if($("div[name='checkbox']").find("input").is(':checked')){
                    hasCoupon = true;
                }else {
                    hasCoupon = false;
                }
                $("#sort .tab-link").each(function (index,item) {
                    if($(item).hasClass("active")){
                        sort = $(item).attr("sortname")+$(item).attr("sortmethod");
                    }
                });
                console.log("关键字："+key+" 券："+hasCoupon+" 排序"+ sort)
            }
            function searchData() {
                pageNumber =1;
                isFinish = false;
                total = 20;
                lastIndex = 0;

                key = $("#search").val();

                if(!isNotEmpty(key)){
                    return;
                }

                $("#sort").removeAttr("style");
                sortParam();

                $.attachInfiniteScroll($('.infinite-scroll'));
                $(".infinite-scroll-preloader").show();
                $("#over").hide();
                $(".list-container").html("");
                loadList();
            }


            // 注册'infinite'事件处理函数
            $(document).on('infinite', '.infinite-scroll-bottom',function() {
                if(isFinish) return;
                // 如果正在加载，则退出
                if (loading) return;
                if (total <= lastIndex || total<=pageSize) {
                    isFinish = true;
                    loadOver();
                    return;
                }
                // 设置flag
                loading = true;
                loadList()
            });
            function loadOver(text) {
                // 加载完毕，则注销无限加载事件，以防不必要的加载
                $.detachInfiniteScroll($('.infinite-scroll'));
                // 隐藏加载提示符
                $('.infinite-scroll-preloader').hide();
                if(!isNotEmpty(text)){
                    text = "没有更多内容了...";
                }
                $(".loadOver").html(text);
                $("#over").show();
            }
            function loadList(){
                $('.infinite-scroll-preloader').show();
                var url = baseUrl+"q/searchMaterials";
                var data = {
                    key: key,
                    page: pageNumber,
                    size: pageSize,
                    hasCoupon: hasCoupon,
                    sort: sort
                };
                $.post(url,data,function (result) {
                    if(result.code == 50000){
                        var pageInfo = result.data;
                        console.log(pageInfo);
                        if(pageInfo!=null && pageInfo.total>0){
                            total = pageInfo.total;
                            console.log(total)
                            // 重置加载flag
                            loading = false;
                            // 添加新条目
                            addItems(pageInfo.list);
                            $('.infinite-scroll-preloader').hide();
                            //分页+1
                            pageNumber += 1;
                            // 更新最后加载的序号
                            lastIndex = $('.list-container li').length;
                            //容器发生改变,如果是js滚动，需要刷新滚动
                            $.refreshScroller();
                        }else {
                            //没有搜索到内容
                            loadOver("没有搜索到内容...")
                            isFinish = true;
                            return;
                        }
                    }else {
                        //请求失败
                        $.toast("请求失败："+result.msg);
                    }
                })
            }
            function addItems(dataList) {
                // 生成新条目的HTML
                var html = '';
                $.each(dataList,function (index,item) {
                    html += '<li>' +
                        '<a href="details.html?itemId='+item.itemId+'&couponId='+item.couponId+'" class="item-link item-content">' +
                        '<div class="item-media">' +
                        '<img src="'+item.img+'" style="width: 4rem;">' +
                        '</div>' +
                        '<div class="item-inner">' +
                        '<div class="item-title-row">' +
                        '<div class="item-title" style="font-weight: bold" >'+item.title+'</div>' +
                        '</div>';
                    //店名
                    html+='<div class="item-subtitle" style="font-size: 0.65rem;line-height: 1.2rem">';
                    switch (item.shopType) {
                        case 0: //淘宝
                            html += '<img style="height: 0.6rem" src="'+tbIco+'"/>';
                            break;
                        case 1: //天猫
                            html += '<img style="height: 0.6rem" src="'+tmIco+'"/>';
                            break;
                        default:
                            html += '　';
                            break;
                    }
                    html += '&nbsp;'+item.shopTitle+'</div>';

                    //价格
                    if(item.hasCoupon){
                        html += '<div class="item-text"><span class="price">￥'+item.zkPrice+'</span></div>';
                        html += '<div class="item-text"><span class="coupon">券:'+item.couponAmount+'</span><span class="volume">月销:'+item.volume+'</span></div>';
                    }else {
                        html += '<div class="item-text"><span class="price">￥'+item.price+'</span></div>';
                        html += '<div class="item-text"><span class="coupon"></span><span class="volume">月销:'+item.volume+'</span></div>';
                    }
                    html += '</div>'
                        +'</a>' +'</li>';
                });
                // 添加新条目
                $('.infinite-scroll-bottom .list-container').append(html);
            }

        </script>
        <script src="js/pageRoute.js"></script>

    </div>
</div>
<!--<div class="panel-overlay"></div>-->
<!-- 侧边栏 -->
<div class="panel panel-left panel-reveal">
    <div class="content-block" id="leftSide">
        <h2>功能列表</h2>
        <p>本站地址：q.hayye.cn</p>
        <p><a name="menu" href="javascript:void(0)" data-href = "convert.html" class="close-panel">淘口令转换</a></p>
        <p><a name="menu" href="javascript:void(0)" data-href = "https://tbq.hayye.cn" class="close-panel">去精简版</a></p>
        <p>更多功能即将加入……</p>
        <br>
        <p>微信公众号</p>
        <p><img style="width: 60%" src="https://blog-1253126263.cos.ap-shanghai.myqcloud.com/tbq/gzh.png"/></p>
        <!--<p><span  url="convert.html">淘口令搜索</span></p>-->
        <!-- Click on link with "close-panel" class will close panel -->
        <p><a href="javascript:void(0)" class="close-panel">关闭</a></p>
    </div>
</div>
</body>
</html>